<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Students Manage System</title>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .navbar{
            border-radius: 0;
        }
        .navbar-brand{
            font-size: 26px;
        }
        .leftBar{
            float: left;
            width: 15%;
            margin-left: 10px;
            margin-top: 50px;
        }
        .rightBar{
            float: right;
            width: 80%;
            margin-right: 30px;
        }
        .input-group{
            float: right;
            margin-bottom: 20px;
            margin-right: 30px;
            width: 500px;
        }
        #basic-addon2{
            width: 100px !important;
            cursor: pointer;
        }

        .showMessage {
            padding: 10px 20px;
            border-radius: 5px;
            position: fixed;
            top: 15%;
            left: 50%;
            color: #ffffff;
            z-index: 999;
            transform: translate(-50%, 0);
        }

        .showMessageSuccess {
            background-color: #f0f9eb;
            border: 1px solid #E1F3D8;
            color: #67c23a;
        }

        .showMessageError {
            background-color: #fef0f0;
            border: 1px solid #fde2e2;
            color: #F76C6C;
        }
        .form-check{
            float: right;
            display: inline;
            margin: 5px 20px;
        }
    </style>
</head>
<body>
<div>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Students Manage System</a>
            </div>
        </div><!-- /.container-fluid -->
    </nav>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-success" style="margin-left: 100px;" data-toggle="modal" data-target="#myModal">
        add Student
    </button>


    <div class="input-group">
        <input type="text" class="form-control" id="searchValue" placeholder="Please Enter Search Name..." aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2">search</span>
    </div>
    <div class="form-check">
        <input class="form-check-input" value="男" type="radio" name="sex" id="flexRadioDefault1">
        <label class="form-check-label" for="flexRadioDefault1">
            man
        </label>
        <input class="form-check-input" value="女" type="radio" name="sex" id="flexRadioDefault2">
        <label class="form-check-label" for="flexRadioDefault2">
            woman
        </label>
        <input class="form-check-input" value="" type="radio" name="sex" id="flexRadioDefault0" checked>
        <label class="form-check-label" for="flexRadioDefault0">
            all
        </label>
    </div>

    <div class="leftBar">
        <ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
            <li role="presentation" class="active studentInfo"><a href="#">Student Information</a></li>
            <li role="presentation"><a href="#">Teacher Information</a></li>
        </ul>
    </div>

    <div class="rightBar">
        <table class="table table-striped" id="stuTable">
<!--            不使用bootStrapTable的时候-->
<!--            <thead>-->
<!--            <tr>-->
<!--                <th class="text-center" style="width: 150px;">学号</th>-->
<!--                <th class="text-center">姓名</th>-->
<!--                <th class="text-center">性别</th>-->
<!--                <th class="text-center">年龄</th>-->
<!--                <th class="text-center" style="width: 100px;">操作</th>-->
<!--            </tr>-->
<!--            </thead>-->
<!--            <tbody id="student_table">-->
            <!--        使用thymeleaf渲染-->
<!--                <tr data-th-each="student: ${data}">-->
<!--                    <th scope="row" data-th-text="${student.id}">1</th>-->
<!--                    <td data-th-text="${student.name}">Mark</td>-->
<!--                    <td data-th-text="${student.sex}">Otto</td>-->
<!--                    <td data-th-text="${student.age}">@mdo</td>-->
<!--                </tr>-->

<!--            </tbody>-->
        </table>
    </div>
</div>


<!-- 添加学生Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">请填写学生信息</h4>
            </div>
            <div class="modal-body">
<!--                表单开始-->
                <form id="formStudent">
                    <input hidden="hidden" name="id" id="id" />
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名...">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄...">
                    </div>
                </form>
<!--                表单结束-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearContent()">取消</button>
                <button type="button" class="btn btn-primary" onclick="addStu()">保存学生</button>
            </div>
        </div>
    </div>
</div>

<!-- 确认删除Small modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="delModal" data-backdrop="static">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="delModal"><p style="color: red">警告！！！</p></h4>
            </div>
            <div class="modal-body">
                此操作将删除该学生的所有信息，是否继续？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="deleteStu">确认删除</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">


    function loadTable(){
        $("#stuTable").bootstrapTable({
            url:'/webapi/student/getByPage',
            striped:true,         //设置为true会有隔行变色效果
            pagination: true,     //底部显示分页条
            singleSelect: false,  //禁止多选

            pageSize:10,           //每页显示数量
            pageNumber:1,         //首页页码
            sidePagination:"server",   //使用服务端分页
            queryParams: function (params){
                let paraObj = {
                    size: params.limit,
                    page: params.offset/params.limit,
                    sort:"id",
                    direct:"desc",
                    name:$("#searchValue").val(),
                    sex:$("input[name='sex']:checked").val(),
                }
                return paraObj;
            },
            columns:[{
                field:'id',
                width: 120,
                align: 'center',
                title:'Number'
            },{
                field:'name',
                width: 120,
                align: 'center',
                title:'Name'
            },{
                field:'sex',
                width: 120,
                align: 'center',
                title:'Sex'
            },{
                field:'age',
                width: 120,
                align: 'center',
                title:'Age'
            },{
                field: '#',
                title: 'Action',
                width: 120,
                align: 'center',
                align:'center',
                formatter:function(value,row,index){
                    return "<button type=\"button\" class=\"btn btn-danger btn-xs\" onclick='delStu("+ row.id +")'>Delete</button> " +
                        "<button type=\"button\" style='margin-left: 10px;' class=\"btn btn-success btn-xs\" onclick='editStu("+ row.id +")'>Edit</button>"
                }
            }]
        })
    }

    //获取学生基本信息数据
    function getStudentList(){
        //调用后端接口
        $.ajax({
            url:'/webapi/student/list'
        }).then(function (res){
            let len = res.length;
            let html = "";
            for (let i = 0; i < len; i++) {

                let item = res[i];
                html += "<tr>"
                    +"<td class=\"text-center\">" + item.id + "</td>"
                    +"<td class=\"text-center\">" + item.name + "</td>"
                    +"<td class=\"text-center\">" + item.sex + "</td>"
                    +"<td class=\"text-center\">" + item.age + "</td>"
                    +"<td class=\"text-center\"> <button type=\"button\" class=\"btn btn-danger btn-xs\" onclick='delStu("+ item.id +")'>删除</button>" +
                    "<button type=\"button\" style='margin-left: 10px;' class=\"btn btn-success btn-xs\" onclick='editStu("+ item.id +")'>编辑</button> </td>"
                    +"</tr>";
            }
            $("#student_table").html(html);
        })
    }

    //取消并清除内容
    function clearContent(){
        $("#id").val("");
        $("#name").val("");
        $("#sex").val("");
        $("#age").val("");
    }

    // 添加学生
    function addStu(){

        let data = $("#formStudent").serialize();
        $.ajax({
            url:'/webapi/student/insertOne',
            method:'post',
            data:data
        }).then(res=>{
            clearContent();
            showMessage("学生信息更新成功！", 1);
            $("#myModal").modal('hide');
            //不使用bootstrapTable时
            // getStudentList();

            // 使用bootstrapTable时
            $("#stuTable").bootstrapTable("destroy");
            loadTable();
        })
    }

    //删除学生
    function delStu(id){
        let stuId = id;
        console.log(id);
        $("#deleteModal").modal('show');

        $("#deleteStu").click(()=>{
            $.ajax({
                url:'/webapi/student/deleteOne',
                method:'delete',
                data: {id:stuId}//将json对象转换为json字符串
            }).then(()=>{
                showMessage("删除成功！", 1);
                //不使用bootstrapTable时
                // getStudentList();

                // 使用bootstrapTable时
                $("#stuTable").bootstrapTable("destroy");
                loadTable();

                $("#deleteModal").modal('hide');
            })
        })
    }

    //编辑学生
    function editStu(id){
        $("#myModal").modal("show");
        $.ajax({
            url:'/webapi/student/getStu/'+id
        }).then((res)=>{
            $("#id").val(res.id);
            $("#name").val(res.name);
            $("#sex").val(res.sex);
            $("#age").val(res.age);
        })
    }

    $(function(){
        // getStudentList();
        loadTable();
        // 获取所有数据
        $(".studentInfo").click(()=>{
            //不使用bootstrapTable时
            // getStudentList();

            // 使用bootstrapTable时
            $("#stuTable").bootstrapTable("destroy");
            loadTable();
        })

        //使用bootstrap时点击搜索按钮实现模糊查询
        $("#basic-addon2").click(()=>{
            $("#stuTable").bootstrapTable("destroy");
            loadTable();
        })
        //不使用bootstrap时点击搜索按钮实现查询
        // $(".input-group-addon").click(function (){
        //     // 获取输入框内容
        //     name = $(".form-control").val();
        //     //调用后端接口
        //     $.ajax({
        //         url:'/webapi/student/findByName',
        //         type:'post',//请求方式，一般为get、post
        //         contentType:'application/json;charset=utf-8',//如果要发送json字符串，此属性不能少；否则，会出现后台会报异常
        //         data:name,//将json对象转换为json字符串
        //         dataType: 'json',
        //     }).then(function (res){
        //         //清除输入框内容
        //         $(".form-control").val("");
        //         if(res == null || res == "") {
        //             showMessage("未查到该学生信息！", 0);
        //             getStudentList();
        //         }else{
        //             showMessage("查找成功！", 1);
        //             let len = res.length;
        //             let html = "";
        //             for (let i = 0; i < len; i++) {
        //                 let item = res[i];
        //                 html += "<tr>"
        //                     +"<td>" + item.id + "</td>"
        //                     +"<td>" + item.name + "</td>"
        //                     +"<td>" + item.sex + "</td>"
        //                     +"<td>" + item.age + "</td>"
        //                     +"<td> <button type=\"button\" class=\"btn btn-danger btn-xs\" onclick='delStu("+ item.id +")'>删除</button>" +
        //                     "<button type=\"button\" style='margin-left: 10px;' class=\"btn btn-success btn-xs\" onclick='editStu("+ item.id +")'>编辑</button> </td>"
        //                     +"</tr>";
        //             }
        //             $("#student_table").html(html);
        //         }
        //     })
        // })

    })
    /**
     * 弹出消息提示框，采用浏览器布局，位于整个页面中央，默认显示3秒
     * 后面的消息会覆盖原来的消息
     * @param message：待显示的消息
     * @param type：消息类型，0：错误消息，1：成功消息
     */
    function showMessage(message, type) {
        let messageJQ= $("<div class='showMessage'>" + message + "</div>");
        if (type == 0) {
            messageJQ.addClass("showMessageError");
        } else if (type == 1) {
            messageJQ.addClass("showMessageSuccess");
        }
        // 先将原始隐藏，然后添加到页面，最后以400毫秒的速度下拉显示出来
        messageJQ.hide().appendTo("body").slideDown(400);
        // 3秒之后自动删除生成的元素
        window.setTimeout(function() {
            messageJQ.show().slideUp(400, function() {
                messageJQ.remove();
            })
        }, 3000);
    }
</script>
</body>
</html>